<template>
  <div id='wrap'>
    <h1 :nav>模板语法-属性</h1>
    <hr>
    <button :disabled="isDisabled" v-on:click="changeId">改变isTrue的值:{{ isTrue }}</button>
    <button :disabled="isDisabled" v-on:click="changeBindId">改变bindId的值:{{ bindId }}</button>
    <div id="commonId">正常commonId元素</div>
    <div v-bind:id="bindId">{{ bindId }}</div>
    <div v-bind:id="isTrue ? bindId : 'commonId'">{{ isTrue ? bindId : 'commonId' }}</div>
    <button @click="isDisabled=!isDisabled">取反</button>
    <p v-bind="objectOfAttrs">我是多属性标签</p>
    <p :id="returnJionStr()" v-bind:class="returnJionStr()">{{ returnJionStr() }}</p>
    <hr>
    <p v-if="isTrue">我是v-if指令控制的</p>
    <a href="https://www.baidu.com/">跳转百度</a>
    <a :href="`https://www.baidu.com/s?wd=${keyworlds}`">在百度搜索国足</a>
    <img :src="`/src/assets/images/${imgsrc}.png`" alt="" @click="imgsrc=6">
    <hr>
    <a v-bind:[attributeName]="`http://www.baidu.com`">动态参数跳转百度</a>
    <a :[attributeDataName]="'data-a'" :[attributeName]="`http://www.baidu.com`">多个动态参数跳转百度</a>
    <a :[`${attributeDataName}NewAttr`]="'data-a'" :[attributeName]="`http://www.baidu.com`">{{`新增多个动态参数跳转百度：${attributeDataName}NewAttr`}}</a>
    <a @[eventName]="() => console.log('我是动态绑定的一个点击')">点我打印</a>
  </div>
</template>

<script lang='ts'>
export default {
  name: 'sts',
}
</script>

<script lang="ts" setup>
import { ref } from "vue";
const nav=ref<string>('arrtName')
const bindId=ref('stuId')
const isDisabled=ref(false)
const isTrue=ref(false)
function changeId(){
    isTrue.value=true
}
function changeBindId(){
    bindId.value='commonId'
}
const objectOfAttrs={
    id:'container',
    class:'wrap',
    style:'background-color:green'
}
function returnJionStr(){
    const arrs=['hello','world']
    return arrs.join('_')
}
const keyworlds='国足'
const imgsrc=ref(7)
const attributeName = 'href'
const attributeDataName = 'data-a'
const eventName = 'click'
</script>

<style scoped lang='scss'>
@use '@/assets/common.scss'

</style>